<template>
<view class="shop">
	<view class="box" v-if="info">
		<!-- info.shopPhotUrl || '/static/timg.jpg' -->
		<image :src="info.shopPhotUrl || '/static/timg.jpg'" style="width: 100%; height: 300upx; display: block;"></image>
		<view class="bottom-box">
			<view style="font-size: 30upx; color: #233c3c; font-weight: 600;">{{ info.shopName || '暂无' }}</view>
			<view style="font-size: 24upx; color: #b4bdbe; margin-top: 20upx;">{{info.shopSite}}</view>
			<view style="width: 100%; height: 0; margin-top: 40upx; border-bottom: 3upx dotted #d6dbda;"></view>
			<view style="font-size: 24upx; color: #b4bdbe; margin-top: 30upx;">营业时间</view>
			<view style="font-size: 30upx; color: #233c3c; margin-top: 24upx; font-weight: 600;">{{info.shopHours}}</view>
			<view style="width: 100%; height: 0; margin-top: 26upx; border-bottom: 3upx dotted #d6dbda; margin-bottom: 10upx;"></view>
			<view style="height: 60upx; width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
				<image src="/static/logo.png" style="width: 30upx; height: 30upx;"></image>
				<view style="font-size: 20upx; color: #455354; margin-left: 23upx;">随身充电宝</view>
			</view>
			<view style="height: 42upx; width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
				<view style="font-size: 30upx; color: #233c3c; font-weight: 600;">{{info.ifBorrow !== 0?'不':''}}可租借</view>
				<view style="font-size: 30upx; color: #233c3c; font-weight: 600; margin-left: 24upx;">{{info.ifReturn !== 0?'不':''}}可归还</view>				
			</view>
			<view @click="daohang" style="width: 600upx; height: 105upx; line-height: 105upx; text-align: center; font-size: 30upx; color: #FFFFFF; margin-top: 40upx; border-radius: 10upx; background-color: #18a3dc;">
				去这里约{{info.lang}}
			</view>
		</view>
	</view>
	<!-- <view class="infoBlank">
		<view style="width: 100%; height: 100%; position: relative;">
			<view style="height: 60upx;">
				<view style="font-weight: 600; position: absolute; left: 0; top: 0; font-size: 36upx;">{{ info.shopName || '暂无' }}</view>
				<view style="font-weight: 600; position: absolute; right: 0; top: 0;">
					<view @click="daohang" style="background: #111; color: #fff; padding: 8upx 30upx; border-radius: 30upx; font-size: 24upx;">导航</view>
				</view>
			</view>		
			<view style="line-height: 2; margin-top: 30upx; color: #999; font-size: 26upx;">店铺地址：{{info.shopSite}}</view>
			<view style="line-height: 2; color: #999; font-size: 26upx;">营业时间：{{info.shopHours}}</view>
			<view style="line-height: 2; color: #999; font-size: 26upx;">联系方式：{{info.shopTele}}</view>
			<cover-view class="status">
				{{info.ifBorrow !== 0?'不':''}}可租借&nbsp;&nbsp;{{info.ifReturn !== 0?'不':''}}可归还
			</cover-view>
		</view>
	</view> -->
</view>
</template>

<script>
import { HTTP } from '../../http.js';
let http = new HTTP;
export default {
	data() {
		return {
			info: null 
		}
	},
	methods: {
		daohang(){
			if(this.info.latitude&&this.info.longitude){
				uni.openLocation({
					latitude: this.info.latitude,
					longitude: this.info.longitude,
					success: ()=>{
						console.log('success');
					}
				});				
			}else{
				uni.showModal({ content: "该商户位置信息有误！", showCancel: false });
			}
		},
		getRad(d){ let PI = Math.PI; return d*PI/180.0; },
		getFlatternDistance(lat1,lng1,lat2,lng2){
			let EARTH_RADIUS = 6378137.0;
			var radLat1 = this.getRad(lat1);
			var radLat2 = this.getRad(lat2);
			var a = radLat1 - radLat2;
			var b = this.getRad(lng1) - this.getRad(lng2);
			var s = 2*Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
			s = s*EARTH_RADIUS;
			s = Math.round(s*10000)/10000.0;
			s = Math.floor(s);
			if(s>1000){
				s=Math.round(s/1000*100)/100+'km';
			}else{
				s=s+'m';
			}
			return s;
    }
	},
	onLoad() {		
		let pages=getCurrentPages();
		let page=pages[pages.length-1];
		uni.getLocation({ 
			type: 'wgs84',
			success: (location)=>{
				http.request({
					url: `ShopManageController/getShopManage?shopId=${page.options.id}`,
					method: 'get',
					success: (res)=>{		
						let info=res.dataList||{};
						let lang=this.getFlatternDistance( location.latitude, location.longitude, info.latitude, info.longitude );
						this.info={ ...info, lang };
						console.log(this.info, 'info');
					}
				});	
			}
		});	
	}
}
</script>

<style>
.shop {
	height: 100vh;
	position: relative;
	background: #FFFFFF;
	overflow: hidden;
}
.shop .box {
	width: 670upx; 
	height: 990upx; 
	background-color: #FFFFFF; 
	border-radius: 10upx; 
	box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1); 
	border: solid 1upx #f2f2f2;
	margin: 33upx auto;
	overflow: hidden;
}
.shop .bottom-box {
	width: 100%; 
	height: 690upx; 
	box-sizing: border-box;
	padding: 35upx 40upx;
}
</style>
